
<template>
  <div class="hospitalContainer">
    <div class="container">
      <div class="handle-box">
        <span style="padding: 8px 8px 8px 0">日期：</span>
        <el-input
          v-model.trim="query.keyword"
          placeholder="请输入"
          class="handle-input mr10"
          @keydown="initAjaxMethod"
        ></el-input>
        <span style="padding: 8px"></span>
        <el-button
          type="success"
          size="medium"
          icon="el-icon-search"
          @click="handleSearch()"
          >搜索</el-button
        >
        <!-- <el-button
          type="warning"
          size="medium"
          icon="el-icon-refresh-left"
          @click="resultClick()"
          >重置</el-button
        > -->
      </div>
      <div class="handle-box" style="display: flex">
        <!-- <el-button
          type="primary"
          icon="el-icon-document-add"
          size="medium"
          @click="createMethod"
          >新增</el-button
        > -->
        <el-button type="danger" size="medium" icon="el-icon-delete" @click="delAllSelection">删除</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column label="序号" width="55">
          <template slot-scope="scope">{{
            scope.$index + (query.pageIndex - 1) * query.pageSize + 1
          }}</template>
        </el-table-column>
        <el-table-column label="日期" align="center">
          <template slot-scope="scope">{{ scope.row.worktime }}</template>
        </el-table-column>
        <el-table-column label="工作时间(上午)" align="center">
          <template slot-scope="scope">{{ scope.row.worktimeamst}} - {{ scope.row.worktimeamed}}</template>
        </el-table-column>

        <el-table-column label="工作时间(下午)" align="center">
          <template slot-scope="scope">{{ scope.row.worktimepmst}} - {{ scope.row.worktimepmed}}</template>
        </el-table-column>
       
        <el-table-column label="人数" align="center">
          <template slot-scope="scope">{{ scope.row.person }}</template> 
        </el-table-column>
        <el-table-column label="已预约人数" align="center">
          <template slot-scope="scope">{{ scope.row.personapply }}</template> 
        </el-table-column>
        <el-table-column label="是否约满" align="center">
          <template slot-scope="scope">{{ scope.row.isapplypull }}</template> 
        </el-table-column>
      
     
        <el-table-column label="创建时间" align="center" prop="create_time"></el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="text"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <span style="padding: 8px"></span>
            <!-- <el-popconfirm
              title="确定删除吗？"
              @confirm="handleDelete(scope.row.id, scope.row.title)"
            >
              <el-button
                type="text"
                slot="reference"
                icon="el-icon-delete"
                style="color: #f56c6c"
                >删除</el-button
              > 
            </el-popconfirm>-->

            <!-- <el-button @click="setcanyuyuedate(scope.row)" type="text" size="small" >设置可预约日期</el-button> -->

            <!-- <el-button @click="showgoods(scope.row)" type="text" size="small" >查看套餐</el-button> -->
          <!-- <el-button @click="showprocess(scope.row)" type="text" size="small" >查看进度</el-button> -->


          <!-- <el-button @click="showperson(scope.row)" type="text" size="small" >查看诉讼</el-button> -->


          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="sizes,total, prev, pager, next, jumper"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :page-sizes="[10, 20, 50, 100, 150, 200]"
          @size-change="handleSizeChange"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialog" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="医院名称" prop="name">
          <el-input
            v-model.trim="ruleForm.name"
            placeholder="医院名称"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="医院简称(英文首字母)">
          <el-input
            v-model.trim="ruleForm.domain"
            placeholder=""
          ></el-input>
        </el-form-item> --> 
 

        <el-form-item label="日期" prop="worktime">
          <el-input
            v-model.trim="ruleForm.worktime"
            placeholder=" "
          ></el-input>
        </el-form-item>
        <el-form-item label="人数" prop="person">
          <el-input type="number"
            v-model.trim="ruleForm.person"
            placeholder=" "
          ></el-input>
        </el-form-item>
        <el-form-item label="工作时间(上午)" prop="person"    >
          <el-input type="number"
            v-model.trim="ruleForm.worktimeamst"
            placeholder=" " style="width: 100px;" min="7"
          ></el-input>至  
           <el-input type="number"
            v-model.trim="ruleForm.worktimeamed"
            placeholder=" " style="width: 100px;"  
          ></el-input>
        </el-form-item>

        <el-form-item label="工作时间(下午)" prop="person">
          <el-input type="number"
            v-model.trim="ruleForm.worktimepmst"
            placeholder=" " style="width: 100px;"  
          ></el-input>至  
           <el-input type="number"
            v-model.trim="ruleForm.worktimepmed"
            placeholder=" " style="width: 100px;"  
          ></el-input>
        </el-form-item>
         
        <!-- <el-form-item label="医院等级" prop="gradename">
          <el-radio-group v-model="ruleForm.gradename">
          <el-radio label="公立三甲">公立三甲</el-radio> 
          <el-radio label="公立医院">公立医院</el-radio>
          <el-radio label="民营医院">民营医院</el-radio>
          <el-radio label="专业机构">专业机构</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- <el-form-item label="医院地址" prop="provinces">
          <el-cascader size="large" :options="provincesData" v-model="provinces" @change="handleChange" placeholder="请选择省市区"></el-cascader> 
       </el-form-item> -->

        <!-- <el-form-item label="当前地址" >
          {{ruleForm.provinces}}-{{ruleForm.city}}-{{ruleForm.provinces}}-
          <el-input
            v-model.trim="ruleForm.address"
            placeholder="详细地址"
          ></el-input>
        </el-form-item> --> 
    


        <!-- <el-form-item label="经度">
          <el-input
            v-model.trim="ruleForm.lon"
            placeholder="经度"
          ></el-input>
          <span><a href="https://jingweidu.bmcx.com" target="_blank" style="color: red;">>点击跳转获取坐标</a></span>
        </el-form-item>
        <el-form-item label="维度">
          <el-input
            v-model.trim="ruleForm.lat"
            placeholder=" "
          ></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="公告">
          <el-input
            v-model.trim="ruleForm.notice"
            placeholder="公告"
          ></el-input>
        </el-form-item>

        <el-form-item label="预约时间描述">
          <el-input
            v-model.trim="ruleForm.yynoticetime"
            placeholder="（列如：提前一天约）"
          ></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="照片">
          <img-upload  :img-url.sync="ruleForm.logo" />
        </el-form-item> -->
        
        <!-- <el-form-item label="状态" prop="状态">
          <el-radio-group v-model="ruleForm.status">
          <el-radio :label=4>开启</el-radio> 
          <el-radio :label=1>关闭</el-radio>    
          </el-radio-group>
        </el-form-item> -->
 
        <!-- <el-form-item label="状态">
          <el-switch
            v-model="ruleForm.status"
            active-text="禁用"
            inactive-text="启用"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model.trim="ruleForm.sort"
            placeholder="排序"
          ></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitMethod">确定</el-button>
      </span>
    </el-dialog>


           <!-- 设置可预约日期 -->
           <el-dialog
            :title="ruleFormzhcustomer.id ? '编辑' : '新增'"
            :visible.sync="dialogVisiblecanyyday"
            width="50%"
            :close-on-click-modal="false"
            top="2%"
            :before-close="(e) => handleClose(e, 'ruleFormzhcustomer')"
        >
            <el-form :model="ruleFormzhcustomer" ref="ruleFormzhcustomer"   v-loading="loading" status-icon label-width="130px">
                <el-form-item label="医院" prop="title">
                    <el-input v-model.trim="ruleFormzhcustomer.name" placeholder=" " style="width: 80%" disabled></el-input>
                </el-form-item>
                <!-- <el-form-item label="材料1" prop="fileurl"> -->
                    <!-- <img-upload :img-url.sync="ruleFormzhcustomer.fileurl"></img-upload> -->
                      <!-- <file-upload :file-url.sync="ruleFormzhcustomer.fileurl" :uplaod-path="wordUpLoad"></file-upload> -->
                    <!-- <p style="padding: 6px; font-size: 12px; color: red">(图片高宽比16:9,格式为png透明图)</p> -->
                <!-- </el-form-item> -->                 
                <!-- <el-form-item label="进度序号">
                    <el-input type="number" v-model.trim="ruleFormzhcustomer.sort" placeholder="请输入排序号" style="width: 80%"></el-input> -->
                    <!-- <p style="padding: 6px; font-size: 12px; color: red">(数字越大越靠前)</p> -->
                <!-- </el-form-item> -->
               
 

                  <!-- <el-form-item label="备注" prop="mark">
                    <el-input v-model.trim="ruleFormzhcustomer.mark" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item> -->
           

                <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div>选择日期:</div>
                </el-col>
                <el-col :span="21">
                  <el-checkbox-group v-model="canyydaylistVal">
                    <!-- :label="val.id" -->
                    <el-checkbox :label="val.id"
                                 @change="funselecanyy()"
                                 :checked="val.active"
                                 v-for="(val,key) in canyydaylist"
                                 :key="key">{{val.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblecanyyday = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitsetcanyyday()">确 定</el-button>
            </span>
        </el-dialog>
    

       <!-- 进度列表 -->
        <el-dialog title="进度列表" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false" top="2%">
            <el-table
                :data="prolistarr"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <!-- <el-table-column label="序号" align="center" width="100" fixed>
                    <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column> -->
                 <el-table-column label="序号" align="center" width="80" >
                    <template slot-scope="scope">{{ scope.row.sort}}</template>
                </el-table-column>
                 
               
                <el-table-column label="标题" align="center">
                    <template slot-scope="scope">{{ scope.row.name}}</template>
                </el-table-column>
                  <el-table-column label="备注" align="center">
                    <template slot-scope="scope">{{ scope.row.mark}}</template>
                </el-table-column>

                  <el-table-column label="关联用户" align="center">
                    <template slot-scope="scope">{{ scope.row.userclanames}}</template>
                </el-table-column>

                 <el-table-column label="材料" align="center">
                    <template slot-scope="scope">
                        <!-- <img
                            style="width: 40px; height: 40px"
                            :src="docLoadPath + (scope.row.fileurl?scope.row.fileurl:scope.row.fileurl)"
                        /> -->
                        <a :href="docLoadPath + (scope.row.fileurl?scope.row.fileurl:scope.row.fileurl)" target="blank"
                        >查看</a>
                    </template>
                </el-table-column>
                <el-table-column label="时间" align="center">
                    <template slot-scope="scope">{{ scope.row.create_time|formDate}}</template>
                </el-table-column>

               <el-table-column label="操作"
                       width="200"
                       align="center">
                  <template slot-scope="scope">
                    <!-- <el-button @click="createBus(scope.row)"
                              type="text"
                              size="small"
                              icon="el-icon-edit">编辑</el-button>  -->

                    <el-button @click="handleDeletepro(scope.row)"
                              type="text"
                              size="small"
                              icon="el-icon-delete"
                              class="red">删除</el-button>
                  </template>
                </el-table-column>


            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>


  </div>
</template>

<script>
import api from '@/api/index';
// import {getdate} from '@/utils/utils'
import {pcaTextArr} from 'element-china-area-data';
import {isString} from 'lodash';
// import ImgUpload from '@/views/commons/ImgUpload'
import imgUpload from '@/components/views/commons/ImgUpload.vue';
export default {
  components: {
    imgUpload
  },
  name: "hospitalworkday",
  data() {
    return {
      provincesData: pcaTextArr,
      provinces:[],
      loading: false,
      dialog: false,
      dialogVisible: false,
      dialogVisiblecanyyday: false,
      disabled: false,
      query: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      pageTotal: 0,
      multipleSelection: [],
      workdayListVal: [],
      workdayList:[],
      ruleForm: {
        worktime: "",
        person: "", 
 
        // status: false,

      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],    
        
        // provinces: [{ required: true, message: "请选择地址", trigger: "change" }],
        // address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
      },
      ruleFormzhcustomer: {
                title: '',
                caseno: '',
                status:0,
                name: '',
                mobile: '',
                sort:0,
                fileurl:'',
                  mark: '',
                 canyydayoksel: '',
      },
      wordUpLoad: api.uploadFileall,
      dialogVisibleworkday:false,
      idList: [], //选择的id数组
      multipleSelection: [],
      fillName: '',
      canyydaylist: [],
      canyydaylistVal: [],
      roleList: [],
      roleListVal: [],
      userclatListVal: [],
      prolistarr:[],
      dialogTitle: "新增",
      id: null,
      serverid:'',
      hosname:'',
      hosid:'',
    };
  },
  created() {
    this.workdayList=[{'name':'周日','id':0},{'name':'周一','id':1},{'name':'周二','id':2},{'name':'周三','id':3},
    {'name':'周四','id':4},{'name':'周五','id':5},{'name':'周六','id':6}]
    this.serverid = this.$route.query.serverid;
    this.hosname = this.$route.query.hosname; 
    this.hosid = this.$route.query.hosid; 
    this.initAjaxMethod();
  },
  methods: {
    handleChange(e){
      console.log(e)
      if(Array.isArray(e) && e.length>2){
        this.ruleForm.provinces=e[0];
        this.ruleForm.city=e[1];
        this.ruleForm.county=e[2];
      }
    },
    //重置
    resultClick() {
      this.query = {
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
      };
      this.initAjaxMethod();
    },
    successMethod() {
      this.dialog = false;
      this.$set(this.query, "pageIndex", 1);
      this.initAjaxMethod();
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.initAjaxMethod();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.initAjaxMethod();
    },
    handleSizeChange(e) {
      this.query.pageSize = e;
      this.initAjaxMethod();
    },
    // 删除操作
    handleDelete(id, detail) {
      this.delAjaxMethod(id, detail);
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      if (this.multipleSelection.length <= 0) {
        return this.$message.error("请选择一个目录");
      }
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          let ids=this.multipleSelection.map((item) =>item.id);
          this.delAjaxMethod(ids.join(","));
        })
        .catch(() => {});
    },
    createMethod() {
      this.ruleForm = {
        name: "",
        domain: "",
        workday: "",
        busitime: "",
        gradename: "",
        minprice: "",
        address: "",
        provinces: "",
        city: "",
        county: "",
        lon: "",
        lat: "",
        notice: "",
        yynoticetime: "",
        status: "",
        statusappoint: "",
        logo:"",
      }
      this.provinces=[];
      this.dialog = true;
      this.id = null;
      this.dialogTitle = "新增";
      setTimeout(() => {
        this.$refs["ruleForm"].clearValidate();
      }, 200);
    },
    // 编辑操作
    handleEdit(data) {
      this.ruleForm = {
 
        person: data.person,
        worktime: data.worktime,
        worktimeamst: data.worktimeamst,
        worktimeamed: data.worktimeamed,
        worktimepmst: data.worktimepmst,
        worktimepmed: data.worktimepmed,
       
      
      }
      // if(isString(data.provincename) && isString(data.cityname) && isString(data.countyname)){
      //   this.provinces=[data.provincename,data.cityname,data.countyname]
      // }

    
      // if(workdaylistarr1){ 
      //     this.workdayList.forEach(item1 => {
      //       workdaylistarr1.forEach(item2 => {
      //         if(item1.id==item2){
      //            item1.active = true;
      //         }
             
      //       })

      //     })
           
      // }


      this.dialog = true;
      this.id = data.id;
      this.dialogTitle = "编辑";
      setTimeout(() => {
        this.$refs["ruleForm"].clearValidate();
      }, 200);
    },

    
    jsMethod () {
          this.ruleForm.workday = this.workdayListVal.join(',');
          // userclatListVal
        },

    initAjaxMethod () {
      let data = {
        pageIndex: this.query.pageIndex,//[string]	是	当前页
        pageSize: this.query.pageSize,//[string]	是	每页条数
        title: this.query.title,//[string]	是	付款名称
        keyword: this.query.keyword,
        hosid: this.hosid
      
      };
      this.$http.post(api.HOSPITAL_workdayINDEX, data)
        .then((res) => {
          console.log('财务', res)
          if (res.code == 1) {
            this.tableData = Array.isArray(res.data.list)?res.data.list:[];
            this.pageTotal = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        })
    },


    //列表加载
     
    submitMethod() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // this.ruleForm.status=this.ruleForm.status==false?1:0;

          const loading = this.$loading({ text: "加载中..." });
          const url = this.id
            ? api.HOSPITAL_workdayset
            : api.HOSPITAL_workdayset;
          if (this.id) this.ruleForm.id = this.id;
          
          this.$http
            .post(url, this.ruleForm)
            .then((res) => {
              // console.log("公海列表", res);
              if (res.code == 1) {
                this.$message.success("操作成功");
                if (!this.id) this.query.pageIndex = 1;
                this.dialog = false;
                this.initAjaxMethod();
              } else {
                this.$message.error(res.msg);
              }
              loading.close();
            })
            .catch((err) => {
              loading.close();
              this.$message.error(err.msg);
            });
        } else {
          this.$message.error("有必填项目未填写");
        }
      });
    },
    //删除单个
    delAjaxMethod(id) {
      console.log(id);
      const loading = this.$loading({ text: "加载中..." });
      const url = api.HOSPITAL_workdayDEL;
      this.$http
        .post(api.HOSPITAL_workdayDEL, { ids: id })
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success("删除成功");
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 设置可预约日期
    setcanyuyuedate(row) {
     
          const ruleFormzhcustomer = {
              // title: row.name,
              // caseno: row.caseno,
              name:  row.name,
              // status: 0,
              // mobile: row.mobile,   
              //  mark: row.mark,               
              id:row.id,
              role_ids:'',
          };

       
          this.canyydaylist=row.canyydaylistdemo;
          if(row.canyydaylist){
              row.canyydaylistdemo.forEach(item1 => {
                row.canyydaylist.forEach(item2 => {
                     if(item1.id==item2){
                      item1.active = true;
                     }
                });
          
            });
            this.canyydaylist=row.canyydaylistdemo;
          } 
          this.ruleFormzhcustomer = ruleFormzhcustomer;
          this.dialogVisiblecanyyday = true;
      },
      funselecanyy () {
          this.ruleFormzhcustomer.canyydayoksel = this.canyydaylistVal.join(',');
          // userclatListVal
        },

         //进度提交 
    onSubmitsetcanyyday() {
 
          if(this.ruleFormzhcustomer.canyydayoksel==""  ){
              this.$message.error('请选择可预约日期');return false;
          } 
            
            this.$refs.ruleFormzhcustomer.validate((valid) => {
                if (valid) {
                    this.loading = true;                 
                    const url = api.HOSPITAL_canyydayEDIT; 
                    this.ruleFormzhcustomer.serverid=this.ruleFormzhcustomer.id;
                    this.$http.post(url, this.ruleFormzhcustomer)
                        .then((res) => {
                            if (res.code == 1) {
                                this.$message.success('操作成功');
                                this.initAjaxMethod();
                                this.dialogVisiblecanyyday = false;
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return this.$message.error('有必填项目未填写');
                }
            });
          },


       // 人数设置
        showgoods(row) {
            this.$router.push({ path: '/goods', query: {serverid:row.id, type: 2,hosid:row.outdsfid}})
           
        },



  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  width: auto;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #f56c6c;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.demo-drawer__content {
  margin: 0 auto;
  width: 80%;
  border: 1px solid #fafafa;
}
.sort-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.sort-group {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.sort-group:hover {
  cursor: pointer;
}
.sort-group:hover span {
  color: #409eff;
}
.sort-group i {
  font-weight: bold;
}
.sort-active {
  color: #409eff;
}
</style>

<style>
.hospitalContainer .demo-ruleForm {
  display: flex;
  flex-wrap: wrap;
}

.hospitalContainer .demo-ruleForm .el-form-item {
  width: 50%;
}
</style>
